<template>
  <div class="option_warpper">
    <a-table :pagination="false" :columns="columns" :dataSource="data">
      <template #answerPercent="{ record }">
        <a-progress
          :percent="record.answerPercent * 100"
          size="small"
          status="active"
        />
      </template>
    </a-table>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  components: {},
  props: {
    data: { type: Array, default: () => [] },
  },
  setup() {
    const columns = [
      {
        title: '选项',
        dataIndex: 'content',
        key: 'content',
      },
      {
        title: '小计',
        dataIndex: 'proportion',
        key: 'proportion',
      },
      {
        title: '比例',
        dataIndex: 'answerPercent',
        key: 'answerPercent',
        slots: { customRender: 'answerPercent' },
      },
    ];
    return { columns };
  },
});
</script>
<style lang="less" scoped></style>
